<template>
  <div id="demo1">
    <h2>js钩子函数</h2>
    <button @click="show = !show">Toggle</button>
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <p v-if="show">Demo</p>
    </transition>
  </div>
</template>
<script>
import Velocity from "velocity-animate";
export default {
  data() {
    return { show: false };
  },
  methods: {
    beforeEnter: function(el) {
      el.style.opacity = 0;
      el.style.transformOrigin = "left";
    },
    enter: function(el, done) {
      Velocity(el, { opacity: 1, fontSize: "1.4em" }, { duration: 300 });
      Velocity(el, { fontSize: "1em" }, { complete: done });
    },
    leave: function(el, done) {
      Velocity(el, { fontSize: "0em" }, { complete: done });
    }
  }
};
</script>
<style>
</style>
